<template>
  <section>
    <el-form inline size="small" label-width="200px">
      <el-row>
        <el-form-item label="交易周期">{{ formData.tpno }}</el-form-item>
        </el-row>
      <el-row>
        <el-form-item label="报价类型">
          <el-select v-model="formData.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row >
        <el-form-item label="数量（度）">
          <el-input type="text" v-model.number="formData.quantity" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="最小交易量（度）">
          <el-input type="text" v-model.number="formData.min_txn_qty" />
        </el-form-item>
      </el-row>
      <el-row >
        <el-form-item label="价格（元）">
          <el-input type="text" v-model.number="formData.price" />
        </el-form-item>
      </el-row>
      <el-row >
        <el-form-item label="信誉要求">
          <el-input type="text" v-model.number="formData.min_credit" />
        </el-form-item>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center" slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="handleClick">确 定</el-button>
    <el-button size="small" @click="handleClose">关闭</el-button>
    
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected value!: any;
  protected formData: any = {
    type: "",
  };
  // for diog
  protected options: any = [
    {
      value: "sale",
      label: "购电报价",
    },
    {
      value: "buy",
      label: "售电报价",
    },
  ];
  // protected tpnoOptions: any = [];

  protected created() {
    this.$set(this.formData, 'tpno', this.value);
  }

  protected async init() {
    try {
      const params: any = {
        page_no: 1,
        page_size: 1000,
        // startime: new Date()
      };
      const res: any = await this.$api
        .getTradePeriodsQuery(params)
        .then((response: any) => {
          const {
            data: { trade_periods, current_tpno, next_tpno }
          } = response;
          this.value = current_tpno;
          localStorage.setItem("tpno", current_tpno);
          localStorage.setItem("nextTpno", next_tpno);
          this.options = trade_periods.map((item: any, idx: number) => {
            return {
              item,
              tpno: item.tpno,
              starttime: item.starttime,
              endtime: item.endtime,
              name: `${item.tpno}\xa0\xa0\xa0\xa0\xa0${Vue.prototype.$fmtDate(
                item.starttime
              )}\xa0\xa0\xa0\xa0\xa0${Vue.prototype.$fmtDate(item.endtime)}`
            };
          });
          // this.selectChange(this.value);
          // this.$emit("TradingCycle", this.value);
        });
    } catch (error) {
      console.log(error);
    }
  }

  protected async handleClick() {
    const params: any = this.formData;
    const res: any = await this.$api
        .creatOrder(params)
        .then((response: any) => {
        });
  }
  protected handleClose() {
    this.formData = {};
    this.$emit("close");
  }
}
</script>

<style lang="scss" scoped>
.mr_w_10 {
  margin: 0 10px;
}
.el-form-item--small.el-form-item {
  width: 100%;
}
/deep/ .el-form-item--small .el-form-item__content {
  width: 60%;
}
.el-select {
  width: 100%;
}
// .el-input--small {
//   width: 100%;
// }
</style>


